<template>
	<div class="edit_container">
		<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
		 @change="onEditorChange($event)">
		</quill-editor>
		<!-- <button v-on:click="saveHtml">保存</button> -->
	</div>
</template>

<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import * as Quill from 'quill' //引入编辑器
	// import
	// imageResize
	// from 'quill-image-resize-module';
	// Quill.register('modules/imageResize', imageResize);
	import {container, ImageExtend, QuillWatch} from 'quill-image-paste-module'
	
	Quill.register('modules/ImageExtend', ImageExtend)
	// import {container, ImageExtend, QuillWatch} from 'quill-image-paste-module'
	export default {
		name: 'App',
		props: {
			quillcontent: String,
		},
		data() {
			
			return {
				content: this.quillcontent,
				editorOption: {
					modules: {
						// imageDrop: true,
						// imageResize: {
						// 	displayStyles: {
						// 		backgroundColor: 'black',
						// 		border: 'none',
						// 		color: 'white'
						// 	},
						// 	modules: ['Resize', 'DisplaySize', 'Toolbar']
						// },
						ImageExtend: {
						  loading: true,
						  name: 'img',
						  // action: "/api/upload/file",
						  response: (res) => {
						    return res.data.url
						  }
						},
						toolbar: [
							['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
							['blockquote', 'code-block'], //引用，代码块


							[{
								'header': 1
							}, {
								'header': 2
							}], // 标题，键值对的形式；1、2表示字体大小
							[{
								'list': 'ordered'
							}, {
								'list': 'bullet'
							}], //列表
							[{
								'script': 'sub'
							}, {
								'script': 'super'
							}], // 上下标
							[{
								'indent': '-1'
							}, {
								'indent': '+1'
							}], // 缩进
							[{
								'direction': 'rtl'
							}], // 文本方向


							[{
								'size': ['small', false, 'large', 'huge']
							}], // 字体大小
							[{
								'header': [1, 2, 3, 4, 5, 6, false]
							}], //几级标题


							[{
								'color': []
							}, {
								'background': []
							}], // 字体颜色，字体背景颜色
							[{
								'font': []
							}], //字体
							[{
								'align': []
							}], //对齐方式


							['clean'], //清除字体样式
							['image', 'video'] //上传图片、上传视频

						],
					}
				}
			}
		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill;
			},
		},
		methods: {
			onEditorReady(editor) { // 准备编辑器
			},
			onEditorBlur() {}, // 失去焦点事件
			onEditorFocus() {}, // 获得焦点事件
			onEditorChange() {
				this.$emit('update:quillcontent',this.content)
			}, // 内容改变事件
			saveHtml: function(event) {
				alert(this.content);
			}
		}
	}
</script>

<style scoped="scoped">
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center !important;
		color: #2c3e50;
		/* margin-top: 60px; */
	}
</style>
